<!DOCTYPE html>
<html lang="cn">

<head>
    <meta charset="UTF-8">
    <title>TodoList</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">

        <button v-on:click="handleBtnClick">提交</button>
        <div v-if="show">{{firstName}}</div>
        <div v-else>{{lastName}}</div>

        <div>{{fullName}}
            {{age}}
        </div>

        <div v-if="show">
            <input key="username" />
            <!-- <input /> -->
        </div>
        <div v-else>
            <input key="password" />
            <!-- <input /> -->
        </div>

        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>

        <div ref='hello' @click="handleClick">hello world

        </div>

        <hr />
        <h4>计数器</h4>
        <counter ref="one" @change="counterChange"></counter>
        <counter ref="two" @change="counterChange"></counter>
        <div>{{total}}</div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
    <script>
        Vue.component('counter', {
            template: '<div @click="counterClick">{{number}}</div>',
            data: function () {
                return {
                    number: 0
                }
            },
            methods: {
                counterClick: function () {
                    this.number++
                    this.$emit('change')
                }
            }
        })

        axios.get('./data.json').then(function ({ data }) {
            console.log(data);
        });
        // axios.get('./data.json').then(function (res) {
        //     console.log(res.data);
        // });

        const json = '{"name": "es","price" : "500"}'
        const { name, price } = JSON.parse(json);
        console.log(name, price);

        Vue.component('row', {
            data: function () {
                return {
                    content: ' this content'
                }
            },
            template: '<tr><td>{{content}}</td></tr>'
        })

        var app = new Vue({
            el: '#app',
            data: {
                list: [],// ['第一课1', '第二课2'],
                inputValue: '',
                firstName: "hongfei",
                lastName: "tan",
                // fullName: "A B",
                age: 18,
                show: false,
                total: 0,
            },
            // //计算属性
            computed: {
                fullName: function () {
                    return this.firstName + " * " + this.lastName
                }
            },
            methods: {
                handleBtnClick: function () {

                    this.show = !this.show
                },

                handleClick: function () {
                    console.log(this.$refs.hello.innerHTML);
                },

                counterChange: function () {
                    console.log(this.$refs.one.number);
                    this.total = this.$refs.one.number + this.$refs.two.number
                    console.log( this.total);

                },

            }
        })
    </script>
</body>

</html>